<%--
  Created by IntelliJ IDEA.
  User: 曹梦1
  Date: 2024/10/23
  Time: 20:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <%--搜索框--%>
    <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
        <el-form-item style=" width: 13%;float: left;margin: 0;padding: 5px">
            <el-input v-model="searchFrom.goodsName" placeholder="请输入键盘名" clearable></el-input>
        </el-form-item>
        <el-form-item style=" width: 13%;float: left;margin: 0;padding: 5px">
            <el-select v-model="searchFrom.kaycapId" placeholder="请选择键帽类型" clearable>
                <el-option
                        v-for="item in capList"
                        :label="item.keycapname"
                        :value="item.keycapid">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item style=" width: 13%;float: left;margin: 0;padding: 5px">
            <el-select v-model="searchFrom.keyboardColorId" placeholder="请选择键盘颜色" clearable>
                <el-option
                        v-for="item in colorList"
                        :label="item.keyboardcolorname"
                        :value="item.keyboardcolorid">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item style=" width: 13%;float: left;margin: 0;padding: 5px">
            <el-select v-model="searchFrom.shaftchooseId" placeholder="请选择轴体类型" clearable>
                <el-option
                        v-for="item in shaftList"
                        :label="item.shaftchoosename"
                        :value="item.shaftchooseid">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item style=" width: 13%;float: left;margin: 0;padding: 5px">
            <el-select v-model="searchFrom.backlightColorId" placeholder="请选择背光颜色" clearable>
                <el-option
                        v-for="item in backlightList"
                        :label="item.backlightcolorname"
                        :value="item.backlightcolorid">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item style=" width: 13%;float: left;margin: 0;padding: 5px">
            <el-select v-model="searchFrom.branchId" placeholder="请选择分店" clearable>
                <el-option
                        v-for="item in branchList"
                        :label="item.branchname"
                        :value="item.branchid">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="margin: 0;padding: 5px">
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button type="warning" @click="resetForm">刷新</el-button>
        </el-form-item>
    </el-form>

    <%-- 当前登录者的id=111不显示添加按钮--%>
    <el-button v-if="userStaffId==111" type="primary" @click="addkeyboards">添加</el-button>

    <%--表--%>
    <el-table
            :data="keyBoardList"
            border
            style="width: 100%"
    >
        <el-table-column
                fixed="left"
                prop="url"
                label="图片"
                width="120">
            <template slot-scope="scope">
                <img :src="scope.row.url" width="100" height="100">
            </template>
        </el-table-column>
        <el-table-column
                prop="goodsname"
                label="商品名称"
                width="120"
        >
        </el-table-column>
        <el-table-column
                prop="layout"
                label="键盘布局"
                width="120">
        </el-table-column>
        <el-table-column
                prop="keycapname"
                label="键帽材质"
                width="120">
        </el-table-column>
        <el-table-column
                prop="keyboardcolorname"
                label="键盘颜色"
                width="120">
        </el-table-column>
        <el-table-column
                prop="shafttype"
                label="轴体类型 "
                width="120">
        </el-table-column>
        <el-table-column
                prop="shaftchoosename"
                label="轴体选择"
                width="120">
        </el-table-column>
        <el-table-column
                prop="interfacetype"
                label="接口类型"
                width="120">
        </el-table-column>
        <el-table-column
                prop="backlightcolorname"
                label="背光颜色"
                width="120">
        </el-table-column>
        <el-table-column
                prop="cprice"
                label="商品进价"
                width="120">
        </el-table-column>
        <el-table-column
                prop="sprice"
                label="商品售价"
                width="120">
        </el-table-column>
        <el-table-column
                prop="branchname"
                label="店铺名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="counts"
                label="数量"
                width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
            <template slot-scope="scope">
                <span v-if="userStaffId==111">
                   <el-button type="success" size="mini" @click="editKeyboards(scope.row)">编辑</el-button>
                </span>
                <el-button type="danger" size="mini" @click="deleteKeyboards(scope.row.goodsid)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <%--分页 --%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <%--新增商品--%>
    <el-dialog
            title="新增商品"
            :visible.sync="addkeyboardsAll"
            width="50%"
            @closed="closeForm"
    >
        <el-form :model="addForm" :rules="Rules" ref="addFormRules" label-width="120px">
            <el-form-item label="头像" prop="url">
                <!--上传图片-->
                <%--
                class="avatar-uploader"  上传组件的类名
                :show-file-list="false"  是否显示文件列表
                :on-success="handleAvatarSuccess"  上传成功回调函数
                :before-upload="beforeAvatarUpload"  上传前校验函数
                --%>
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsname">
                <el-input v-model="addForm.goodsname" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="键盘布局" prop="layout">
                <el-input v-model="addForm.layout" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="键帽材质" prop="keycapid">
                <el-select v-model="addForm.keycapid" placeholder="请选择" style="width: 300px">
                    <el-option
                            v-for="item in capList"
                            :key="item.keycapid"
                            :label="item.keycapname"
                            :value="item.keycapid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="键盘颜色" prop="keyboardcolorid">
                <el-select v-model="addForm.keyboardcolorid" placeholder="请选择" style="width: 300px">
                    <el-option
                            v-for="item in colorList"
                            :key="item.keyboardcolorid"
                            :label="item.keyboardcolorname"
                            :value="item.keyboardcolorid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="轴体类型" prop="shafttype">
                <el-input v-model="addForm.shafttype" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="轴体选择" prop="shaftchooseid">
                <el-select v-model="addForm.shaftchooseid" placeholder="请选择" style="width: 300px">
                    <el-option
                            v-for="item in shaftList"
                            :label="item.shaftchoosename"
                            :value="item.shaftchooseid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="接口类型" prop="interfacetype">
                <el-input v-model="addForm.interfacetype" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="背光颜色" prop="backlightcolorid">
                <el-select v-model="addForm.backlightcolorid" placeholder="请选择" style="width: 300px">
                    <el-option
                            v-for="item in backlightList"
                            :key="item.backlightcolorid"
                            :label="item.backlightcolorname"
                            :value="item.backlightcolorid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品进价" prop="cprice">
                <el-input v-model="addForm.cprice" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="商品售价" prop="sprice">
                <el-input v-model="addForm.sprice" style="width: 300px"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addkeyboardsAll = false">取 消</el-button>
            <el-button type="primary" @click="addKeys()">确 定</el-button>
        </span>
    </el-dialog>

    <%--编辑--%>
    <el-dialog
            title="编辑商品"
            :visible.sync="editkeyboardsAll"
            width="30%"
            @closed="closeForm2"
    >
        <el-form :model="editForm" :rules="Rules" ref="editFormRules" label-width="80px">
            <el-form-item label="头像" prop="url">
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsname">
                <el-input v-model="editForm.goodsname"></el-input>
            </el-form-item>
            <el-form-item label="键盘布局" prop="layout">
                <el-input v-model="editForm.layout"></el-input>
            </el-form-item>
            <el-form-item label="键帽材质" prop="keycapid">
                <el-select v-model="editForm.keycapid" placeholder="请选择">
                    <el-option
                            v-for="item in capList"
                            :label="item.keycapname"
                            :value="item.keycapid+''">
                    </el-option>

                </el-select>
            </el-form-item>
            <el-form-item label="键盘颜色" prop="keyboardcolorid">
                <el-select v-model="editForm.keyboardcolorid" placeholder="请选择">
                    <el-option
                            v-for="item in colorList"
                            :label="item.keyboardcolorname"
                            :value="item.keyboardcolorid+''">
                    </el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="轴体类型" prop="shafttype">
                <el-input v-model="editForm.shafttype"></el-input>
            </el-form-item>
            <el-form-item label="轴体选择" prop="shaftchooseid">
                <el-select v-model="editForm.shaftchooseid" placeholder="请选择">
                    <el-option
                            v-for="item in shaftList"
                            :label="item.shaftchoosename"
                            :value="item.shaftchooseid+''">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="接口类型" prop="interfacetype">
                <el-input v-model="editForm.interfacetype"></el-input>
            </el-form-item>
            <el-form-item label="背光颜色" prop="backlightcolorid">
                <el-select v-model="editForm.backlightcolorid" placeholder="请选择">
                    <el-option
                            v-for="item in backlightList"
                            :label="item.backlightcolorname"
                            :value="item.backlightcolorid+''">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品进价" prop="cprice">
                <el-input v-model="editForm.cprice"></el-input>
            </el-form-item>
            <el-form-item label="商品售价" prop="sprice">
                <el-input v-model="editForm.sprice"></el-input>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editkeyboardsAll = false">取 消</el-button>
            <el-button type="primary" @click="editKeys()">确 定</el-button>
        </span>
    </el-dialog>

</div>
</body>
<script>
  //对进价和售价进行验证，验证规则为必须为数字类型且大于0,可以小数点后两位
    var checkPrice = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入进价'))
        } else {
            if (value <= 0) {
                callback(new Error('必须大于0'))
            } else {
                var reg = /^[0-9]+([.]{1}[0-9]{1,2})?$/;
                if (reg.test(value)) {
                    callback()
                } else {
                    callback(new Error('输入的价格应为数字类型'))
                }
            }
        }
    }
    // 售价验证 验证规则为必须为数字类型售价不能小于进价
    var CheckSprice = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入售价'))
        } else {
            if (value <= app.addForm.cprice) {
                callback(new Error('售价必须大于进价'))
            } else {
                var reg = /^[0-9]+([.]{1}[0-9]{1,2})?$/;
                if (reg.test(value)) {
                    callback()
                } else {
                    callback(new Error('输入的价格应为数字类型'))
                }
            }
        }
    }
    let app = new Vue({
        el: '#app',
        data: {
            searchFrom: {},//搜索条件
            capList: [],//键帽列表
            colorList: [],//颜色列表
            shaftList: [],//轴体列表
            backlightList: [],//背光列表
            branchList: [],//分店列表

            keyBoardList: [],//商品列表
            currentPage: 1,//当前页码
            pageSize: 5,//每页显示多少条数据
            total: 0,//总条数

            addkeyboardsAll: false,//添加商品弹框是否显示
            addForm: {},//添加商品表单
            imageUrl: '',//图片地址
            Rules: {
                url: [
                    {required: true, message: '请上传图片', trigger: 'blur'}
                ],
                goodsname: [
                    {required: true, message: '请输入商品名称', trigger: 'blur'}
                ],
                layout: [
                    {required: true, message: '请输入键盘布局', trigger: 'blur'}
                ],
                keycapid: [
                    {required: true, message: '请选择键帽材质', trigger: 'blur'}
                ],
                keyboardcolorid: [
                    {required: true, message: '请选择键盘颜色', trigger: 'blur'}
                ],
                shafttype: [
                    {required: true, message: '请输入轴体类型', trigger: 'blur'}
                ],
                shaftchooseid: [
                    {required: true, message: '请选择轴体选择', trigger: 'blur'}
                ],
                interfacetype: [
                    {required: true, message: '请输入接口类型', trigger: 'blur'}
                ],
                backlightcolorid: [
                    {required: true, message: '请选择背光颜色', trigger: 'blur'}
                ],
                cprice: [
                    {validator: checkPrice, trigger: 'blur'}
                ],
                sprice: [
                    {validator: CheckSprice, trigger: 'blur'},
                ],
                branchid: [
                    {required: true, message: '请选择分店', trigger: 'blur'}
                ],
            },

            editForm: {},//编辑商品表单
            editkeyboardsAll: false,//编辑商品弹框是否显示

            userStaffId: undefined,//当前登录这的id

        },
        created() {
            this.loadgoodsList(); //加载键盘商品列表
            this.loadcapList();//加载键帽列表
            this.loadcolorList();//加载颜色列表
            this.loadshaftList();//加载轴体列表
            this.loadbacklightList();//加载背光列表
            this.loadBranchList();//加载分店列表
            this.getUserStaffId();//获取当前登录者id

        },
        methods: {
            //当前登录者的id
            getUserStaffId() {
                axios.get("/goods/getUserStaffId").then(res => {
                    this.userStaffId = res.data.data;
                })
            },


            //删除
            deleteKeyboards(goodsid) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/goods/deleteGoods?goodsid=" + goodsid).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success(res.data.msg);
                            this.loadgoodsList();//刷新列表
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },


            //编辑
            editKeyboards(row) {
                this.editForm = row;//赋值
                this.imageUrl = this.editForm.url;
                this.editkeyboardsAll = true;//弹框显示

            },
            //确认编辑
            editKeys() {
                this.$refs.editFormRules.validate((valid) => {
                    if (valid) {
                        axios.post("/goods/updateGoods", this.editForm).then(res => {
                            if (res.data.code == 200) {
                                this.$message.success(res.data.msg);
                                this.editkeyboardsAll = false;
                                this.imageUrl = "";//清空图片地址
                                this.loadgoodsList();//刷新列表

                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            // 关闭弹框并且重置表单
            closeForm2() {
                this.$refs.editFormRules.resetFields();//重置表单
                this.imageUrl = "";//清空图片地址
            },
            //添加
            addkeyboards() {
                this.addkeyboardsAll = true;//弹框显示
            },
            //确认添加
            addKeys() {
                this.$refs.addFormRules.validate((valid) => {
                    if (valid) {
                        axios.post("/goods/addGoods", this.addForm).then(res => {
                            if (res.data.code == 200) {
                                this.$message.success(res.data.msg);
                                this.addkeyboardsAll = false;
                                this.loadgoodsList();//刷新列表

                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })

                    }
                });
            },
            // 关闭弹框并且重置表单
            closeForm() {
                this.$refs.addFormRules.resetFields();//重置表单
                this.imageUrl = "";//清空图片地址
            },

            // 上传图片 res 为返回的数据 file 为上传的文件
            //上传图片成功后触发的函数
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;//获取图片地址
                this.addForm.url = this.imageUrl;//赋值给添加表单
                this.editForm.url = this.imageUrl;//赋值给修改表单
            },
            //上传前回调的函数
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' ||
                    file.type === 'image/png' ||
                    file.type === 'image/jpg' ||
                    file.type === 'image/webp';//判断上传文件类型
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            //加载键帽列表
            loadcapList() {
                axios.get("/keycap/list").then(resp => {
                    this.capList = resp.data.data;
                })
            },
            //加载颜色列表
            loadcolorList() {
                axios.get("/keyboardcolor/list").then(resp => {
                    this.colorList = resp.data.data;
                })
            },
            //加载轴体列表
            loadshaftList() {
                axios.get("/shaftchoose/list").then(resp => {
                    this.shaftList = resp.data.data;
                })
            },
            //加载背光列表
            loadbacklightList() {
                axios.get("/backlightcolor/list").then(resp => {
                    this.backlightList = resp.data.data;
                })
            },
            //加载分店列表
            loadBranchList() {
                axios.get("/branch/getBranchName").then(resp => {
                    this.branchList = resp.data.data;
                })
            },
            //加载商品列表
            loadgoodsList() {
                axios.post("/goods/list?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize, this.searchFrom).then(resp => {
                    this.keyBoardList = resp.data.data.list;
                    this.total = resp.data.data.total;
                })
            },
            //分页
            // 每页数据条数改变
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadgoodsList();
            },
            // 页码改变
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadgoodsList();
            },


            // 搜索
            onSubmit() {
                this.loadgoodsList();
            },
            // 刷新
            resetForm() {
                this.searchFrom = {};
                this.loadgoodsList();
            },
        }
    })
</script>
</html>
